<template>
  <el-card class="demo-card">
    <template #header>
      <h3>搜索表格</h3>
    </template>
    <div>组件描述</div>
  </el-card>
  <SearchTable
    tableName="Table Name"
    help="This is a help message"
    :columns="columns"
    :fetchData="fetchData"
  />
</template>

<script setup>
import { ref } from "vue";
import SearchTable from "@/components/Basic/SearchTable/index.vue";
const data = ref([]);
const columns = ref([
  {
    prop: "id",
    label: "ID",
  },
  {
    prop: "name",
    label: "姓名",
  },
  {
    prop: "age",
    label: "年龄",
  },
  {
    prop: "sex",
    label: "性别",
  },

  {
    prop: "address",
    label: "地址",
  },
]);
const actions = ref([
  {
    label: "操作1",
    handler: (row) => {
      console.log(row);
    },
  },
  {
    label: "操作2",
    handler: (row) => {
      console.log(row);
    },
  },
]);

for (let i = 0; i < 100; i++) {
  data.value.push({
    id: i,
    name: `name${i}`,
    age: i,
    sex: i % 2 === 0 ? "男" : "女",
    address: `address${i}`,
  });
}

function fetchData(page, pageSize, form) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        list: data.value.slice((page - 1) * pageSize, page * pageSize),
        total: 100,
      });
    }, 2000);
  });
}
</script>

<style scoped></style>
